<template>
	<view class="SelectReading">
		<view class="drawer-box" style="width: 100%; height: 100%; position: relative; z-index: 999;">
			<hj-dragabledrawer :options="options" ref="dragBox">
				<view class="my-d-content">
					<view class="mater-status-size">
						<text class="checkbox-title">结算状态</text>
						<radio-group @change="radioChange" :name="name">
							<label :class="item.checked ?  'checkbox selectBox' : 'checkbox '"
								@click="labelBtn(item.value,index)" v-for="(item,index) in labelList" :key="item.value">
								<radio :value="item.value" :checked="item.checked" v-show="false" />
								<text style="line-height: 35rpx;">{{item.name}}</text>
							</label>
						</radio-group>
					</view>
					<view class="drawer-box-btn">
						<button class="d-b-reset" @tap="reset">重置</button>
						<button class="d-b-submit" @tap="close">确认</button>
					</view>
				</view>
			</hj-dragabledrawer>
		</view>
		<view class="light-box2" v-show="iisShow" @click="clickLightBox()"></view>
		<view class="meter-index-nav-box">
			<view class="meter-index-nav" id="meter-index-nav">
				<!-- <uni-data-picker class="mater-rooms-checkbox" placeholder="房间号" :border="false" :localdata="navRooms"
					popup-title="请选择房间号" @change="ronchange" @nodeclick="ronnodeclick"></uni-data-picker> -->
				<view class="mater-rooms-checkbox" @click="showRoomBtn">
					<text style="font-size: 28rpx;">
						{{Roomvalue}}
					</text>
					<image src="/static/image/sanjiaoxing-l@2x.png" mode="aspectFit"
						style="width: 26rpx;height: 26rpx;"></image>
				</view>
				<!-- <uni-data-picker class="mater-houseType-checkbox" placeholder="费用类型" :border="false"
					:localdata="houseTyoe" popup-title="请选择类型" @change="tonchange" @nodeclick="tonnodeclick">
				</uni-data-picker> -->

				<!-- <view class="mater-time-checkbox"> -->
				<!-- 	<view class="mater-time-checkbox" @click="DatePicker('date')"> -->

				<view class="mater-time-checkbox">
					<!-- <text>{{TextMeter}}</text> -->
					<picker mode="date" :value="date" :start="startDate" :end="endDate" fields="month"
						@change="bindDateChange">
						<view style="display: flex;width: 120%;align-items: center;font-size: 26rpx;">
							<view>
								{{TextMeter}}
							</view>
						</view>
					</picker>


					<!-- 		<biaofun-datetime-picker
						placeholder="抄表时间"
						defaultValue=""
						start="2000-02"
						end="2100-10"
						fields="month"
						@change="changeDatetimePicker"
					></biaofun-datetime-picker> -->
					<image class="sanjiaoxingImg" src="/static/image/sanjiaoxing-l@2x.png"
						style="width: 30rpx; height: 17rpx; margin-left: 6%;" mode="aspectFit">
					</image>
				</view>
				<view class="mater-dtime-checkbox" @click="DatePicker('range')">
					<text>
						{{TextDeadlineU}}
						{{TextDeadlineD}}
					</text>
					<image src="/static/image/sanjiaoxing-l@2x.png" style="width: 30rpx; height: 17rpx;"
						mode="aspectFit">
					</image>
				</view>
				<!-- <uni-data-picker class="mater-status-checkbox" placeholder="状态" :border="false" :localdata="status"
					popup-title="请选择缴费状态" @change="Sonchange" @nodeclick="Sonnodeclick"></uni-data-picker> -->
				<view class="screen-btn" @tap="open">
					<image src="/static/image/shaixuan@2x.png" mode="aspectFit" style="width: 26rpx; height: 30rpx;">
					</image>
					<text style="font-size: 28rpx;">更多筛选</text>
				</view>
			</view>
		</view>
		<view class="ssasd">
			<!-- <input type="text" v-model="SelUniquNo" @input="inputWord" /> -->
			<!-- <input type="text" v-model="SelRtime" @input="inputWord" /> -->
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="ed" @cancel="ed" format="yyyy-mm-dd hh:ii:ss" />


		<view class="ReadingContainer ">
			<view class="RedingTime">
				<text>{{ListTitleDateU}}{{ListTitleDateD}}</text>
			</view>
			<view>
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption"
					@up="upCallback">
					<meter-list :list="meters"></meter-list>
				</mescroll-body>
			</view>
		</view>
		<view class="SelectRoomsBox" v-show="iisShow">
			<view style="position: absolute;right: 20rpx;top:20rpx;" @click="showRoomBtn">x</view>
			<text>选择房号{{uniqueNo}}</text>

			<view class="SelectBox">
				<uni-data-picker class="Building" :localdata="Building" popup-title="请选择楼数" @change="onchange"
					@nodeclick="onnodeclick"></uni-data-picker>
				<uni-data-picker class="floor" :localdata="Floor" popup-title="请选择层数" @change="floor_onchange"
					@nodeclick="onnodeclick"></uni-data-picker>
			</view>
			<view class="floors" v-show="showF">
				<uni-data-checkbox class="room" mode="tag" v-model="value" :localdata="Room" @change="change">
				</uni-data-checkbox>
			</view>
			<button form-type="submit" class="sub_button" @click="toAddReading" v-show="isBtnShow">确认</button>
			<!-- <button class="sub_button resetBtn" @click="toAddReadingReset">重置</button> -->
			<button class="resetBtn" @click="toAddReadingReset">重置</button>
		</view>


		<!-- <view class="light-box" v-show="isShow" @click="showlight">
			<view class="ps">
				<text>
					当前楼宇，楼层无房间入住，请重新选择!
				</text>
				<view class="btn">
					确定
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	let _this;
	let _app = getApp();
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import hjDragabledrawer from '@/components/hj-dragabledrawer/hj-dragabledrawer.vue'; //这里修改下插件的相对路径
	let dragBox;
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MxDatePicker,
			hjDragabledrawer,
			biaofunDatetimePicker
		},
		props: {
			labelList: {
				type: [Object, Array],
				default: () => [{
					name: '不限',
					value: '',
					checked: true
				}, {
					name: '未缴费',
					value: '1',
					checked: false
				}, {
					name: '已缴费',
					value: '2',
					checked: false
				}, {
					name: '已结算',
					value: '3',
					checked: false
				}, {
					name: '待结算',
					value: '4',
					checked: false
				}],
			},
			name: {
				type: String,
				default: 'name'

			}
		},
		computed: {
			//过滤方法
			items: function() {
				var _search = this.search;
				if (_search) {
					//不区分大小写处理
					var reg = new RegExp(_search, 'gi')
					//es6 filter过滤匹配，有则返回当前，无则返回所有
					// console.log("正在执行" + _search)
					var flag = new RegExp("[-]")
					// 判断 even 是否包含特殊字符
					if (flag.test(_search)) {
						// console.log('包含！')
						return this.list.filter(function(e) {
							//匹配某个字段
							return e.msg.match(reg);
						})
					} else {
						// console.log('不包含！')
						return this.list.filter(function(e) {
							//匹配所有字段
							return Object.keys(e).some(function(key) {
								// return e[key].match(reg);
								return e.name.match(reg);
							})
						})
					}
				};
				return this.list;
			}
		},
		data() {
			return {
				curWord: '',
				iisShow: '',
				showPicker: false,
				type: 'date',
				value: [{}],
				newDate: '',
				cnDate: '',
				deadlineD: '',
				deadlineU: '',
				range: ['2019/01/01', '2019/01/06'],
				key: 0,
				showview: true,
				version: '',
				themeColor: '#109EF8',
				titleColor: '#666666',
				filterResult: [{
					btn_uniqueNo: '',
					type: '',
					rTime: '',
					deadline: '',
					single: ''
				}],
				Astatus: '',
				roomss: [],
				Rooms: [{
					uniqueNo: "", //房间唯一号
					meterReadingTime: "", //抄表时间
					deadline: "", //截止时间

					total: "", //总价
					status: "" //缴费

				}],
				navRooms: [{
					id: '',
					text: "",
					value: "",
				}],
				houseTyoe: [{
					id: '',
					text: "",
					value: "",
				}],
				IdTypeName: '',
				//模糊搜索
				search: '',
				list: [{}],
				// Nav键值
				// 房间号
				SelUniquNo: '',
				// 费用类型
				SelVarsion: '',
				// 抄表时间
				SelRtime: '',
				// 截止时间D与U
				SelDeadlineD: '',
				SelDeadlineU: '',
				// 状态
				SelStatus: '',
				// 分页
				SelPage: '',

				// 按钮渲染
				TextDeadlineD: '',
				TextDeadlineU: '缴费截止时间',
				TextMeter: '抄表时间',

				//   表头
				ListTitleDateD: '',
				ListTitleDateU: '',

				// 筛选
				options: {
					visible: false,
					rightMode: true,
					autoClose: true,
					pulldown: true,
					width: '',
					bg: '#EBEFF6',
				},
				// =筛选按钮
				labelName: '',
				labelDataList: 0,

				// 列表
				meters: [],
				// 筛选为空
				curWord: '',
				upOption: {
					noMoreSize: '', //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					empty: {
						use: true,
						icon: '/static/image/zanwushuju@2x.png',
						tip: '~ 无结果 ~', // 提示
					}
				},
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					empty: {
						use: true,
						tip: '~ 无结果 ~' // 提示
					}
				},
				// 楼宇中文名显示
				Buiding: [],
				BuidingNo: [],
				BuidingName: [],

				// 房间号相关
				uniqueNo: '',
				clickValue: '',
				Building: [{
					id: '',
					text: "",
					value: ""
				}],
				Floor: [{
					id: '',
					text: "",
					value: ""
				}],
				Room: [{
					id: '',
					Num: '',
					value: '',
					text: ''
				}],
				showF: false,
				isBtnShow: false,
				isShow: false,
				Roomvalue: '房间号',
				page: {
					num: 1,
					size: 10,
				},
				// canReset:false,
				startDate: '',
				endDate: '',
				imgPath: ''
			}
		},
		created() {
			// this.editPaymentStatus = this.PaymentStatus[0].value; /* 默认选中 */
			this.getBuild()
		},

		// 详情返回列表,重新加载列表数据
		onShow() {
			this.meters = []
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		},
		onLoad: function(options) {
			this.getBuild()
			this.getBuilding()
			this.getNavRooms() //获取顶部菜单所需的房间号
			this.getHouseTypes() //获取费用类型列表
			this.getNewDate() //加载当前时间方法
			this.labelDataList = 2
			setTimeout(function() {
				// console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();


		},
		onReady() {
			dragBox = this.$refs.dragBox;
		},
		methods: {
			bindDateChange: function(e) {
				const time = e.target.value.split("-")
				this.SelRtime = time[0] + "年" + time[1] + "月"
				this.TextMeter = this.SelRtime.slice(0, this.SelRtime.length - 1)
				const sliceYearTime = this.TextMeter.slice(0, this.SelRtime.length - 3)
				const sliceMonthTime = this.TextMeter.substring(this.TextMeter.indexOf("0", this.TextMeter.indexOf(
					"0") + 1) + 1);
				// console.log('截取后得到的sliceYearTime：' + sliceYearTime); //2022年
				// console.log('截取后得到的sliceMonthTime：' + sliceMonthTime);//5
				this.SelRtime = sliceYearTime + sliceMonthTime
				console.log('拼接后的this.SelRtime：' + this.SelRtime);
				this.doSearch(e)
				// console.log('点击了的时间: ' + this.TextMeter);
			},
			inputWord(e) {
				// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
				// 节流,避免输入过快多次请求
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.doSearch(this.SelRtime)
					// this.doSearch(this.testInput)
				}, 300)
			},
			// 获取楼宇中文名
			async getBuild() {
				const res = await this
					.$myRequest({
						url: '/api-sale/config/house/building/',
						method: 'get',
					})
				// console.log("res",res)
				if (res.success === true) {
					// console.log(res.body.houseBuilding.data)
					this.Buiding = res.body.houseBuilding.data
					// console.log(this.Buiding[])
					let i
					for (let i in this.Buiding) {
						if (this.Buiding[i]) {
							// console.log(this.Buiding[i].buildingNo)
							this.BuidingNo[i] = this.Buiding[i].buildingNo
							this.BuidingName[i] = this.Buiding[i].buildingName
						}
					}
					// console.log(this.BuidingName)
				}
			},


			// 官方下拉刷新
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					// console.log("刷新")
					// uni.redirectTo({
					// 	url: '/pages/meterCheck/index'
					// })
					uni.stopPullDownRefresh();
				}, 1000);
			},

			// 搜索
			doSearch(word) {
				this.curWord = word
				this.meters = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},
			onNavigationBarButtonTap() {
				// console.log("点击了自定义按钮");
				uni.navigateTo({
					// uni.redirectTo({
					url: "/pages/meterCheck/AddCost/AddCost"
				})
			},
			// 筛选
			open() {
				dragBox.open();
				this.iisShow = false;
			},
			close(word) {
				this.SelStatus = this.labelDataList
				dragBox.close();
				// console.log("Status===" + this.SelStatus)
				this.doSearch(word)
			},
			reset() {
				for (let i in this.labelList) {
					this.labelList[i].checked = false;
				}
				this.labelList[0].checked = true
				this.labelDataList = ''

			},
			// 筛选选择器
			labelBtn(name, index) {
				// console.log(name, index, "nameindex")
				this.labelName = name
				for (let i in this.labelList) {
					this.labelList[i].checked = false;
				}
				this.labelList[index].checked = true
			},
			radioChange: function(e) {
				this.labelDataList = e.detail.value
				// console.log("lab=" + this.labelDataList)
			},
			// **********
			addMeterCheck() {
				uni.navigateTo({
					url: 'AddCost/AddCost'
				})
			},
			tap: function(e) {
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = 30
					this.y = 30
				})
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			},
			changeDatetimePicker(date) {
				console.log('选择的日期时间数据：', JSON.stringify(date));
				// this.SelRtime=date.YYYY+"年"+date.MM+'月'
				this.SelRtime = date.YYYY + "-" + date.MM + "-" + date.DD
				console.log(this.SelRtime)
				this.doSearch('2021-07-22 11:08:00')
			},
			DatePicker(type) { //显示
				this.type = type;
				// console.log("type",type)
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				console.log('点击了选择日历ed');
				if (this.type == "range" && e == false) {
					this.SelDeadlineU = ''
					this.SelDeadlineD = ''

					this.TextDeadlineU = '缴费截止时间'
					this.TextDeadlineD = ''

					this.ListTitleDateU = ''
					this.ListTitleDateD = ''


					this.doSearch(e)
				} else if (this.type == "date" && e == false) {
					// console.log("抄表时间执行了取消")
					this.TextMeter = '抄表时间'
					this.SelRtime = ''
					this.doSearch(e)
				}
				if (e) {
					// console.log("e==", e)
					this[this.type] = e.value;

					if (e.value.length == 2) {
						// this.getDeadline(e)
						this.SelDeadlineU = e.value[0]
						this.SelDeadlineD = e.value[1]

						// 选择后渲染到按钮上
						let d = e.date[0]
						var UdateTime = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
						this.TextDeadlineU = UdateTime
						// 选择后渲染到按钮上
						let u = e.date[1]
						var DdateTime = u.getFullYear() + '/' + (u.getMonth() + 1) + '/' + u.getDate();
						this.TextDeadlineD = DdateTime
						// 渲染到表头上
						this.ListTitleDateU = this.TextDeadlineU + " 至 "
						this.ListTitleDateD = this.TextDeadlineD


						this.doSearch(e)
						// this.getRoomsInfo()
					} else {
						// this.getPayDate(e)
						let d = e.date
						var dateTime = d.getFullYear() + '年' + (d.getMonth() + 1) + '月';

						let r = e.date
						var RRdateTime = r.getFullYear() + '/' + (r.getMonth() + 1);

						this.TextMeter = this.SelRtime

						// console.log('cndate=>' + dateTime)
						this.SelRtime = dateTime
						this.TextSelRtime = this.SelRtime
						this.doSearch(e)
						// this.getRoomsInfo()
					}
				}
				// console.log(e)
			},


			getNewDate() { //获取当前时间并打印
				var yy = new Date().getFullYear();
				var mm = new Date().getMonth() + 1;
				var dd = new Date().getDate();
				var dd1 = new Date().getDate() + 2;
				// range: ['2019/01/01', '2019/01/06']
				// console.log(this.range[0])
				this.newDate = yy + '/' + mm + '/' + dd;
				this.range[0] = this.newDate
				this.range[1] = yy + '/' + mm + '/' + dd1;
				this.cnDate = yy + '年' + mm + '月';
				this.date = this.newDate

			},
			pushDate() { //修改时间数组为当前时间
				// console.log(this.newDate),
				this.$set(this.range, 0, this.newDate)
				this.$set(this.range, 1, this.newDate)
				// console.log(this.range)
			},
			selectPayTypeChange() { //缴费类型查询
				var index = this.$refs.addRequestState.value
				console.log("index：" + index)
				this.getPay()
			},
			meterCheckTo() {
				uni.navigateTo({
					url: "/pages/meterCheck/index"
				})
			},

			async getNavRooms() {
				const res = await this
					.$myRequest({
						url: '/api-house/api/house/?saleStatus=4',
						method: 'get'
					})
				// console.log(res.data.data)
				let pickroom = res.data.data
				for (let i in pickroom) {
					if (pickroom[i].houseId) {
						//把数组的 houseId字段改名为id
						pickroom[i].id = pickroom[i].houseId;
						//把字段的 房屋名称【houseNo】 改名为num
						pickroom[i].Num = pickroom[i].houseNo;
						//把字段的 房屋名称【houseNo】 改名为text
						pickroom[i].text = pickroom[i].uniqueNo;
						//把数组的 houseNo字段改名为value
						pickroom[i].value = pickroom[i].uniqueNo;
					}
				}
				pickroom.unshift({
					id: '',
					text: '全房',
					value: '',
				})
				//把处理后的分类数组 赋值
				this.navRooms = pickroom;
			},
			// 
			async getHouseTypes() {
				const res = await this
					.$myRequest({
						url: '/api-operate/config',
						method: 'get',
					})
				let pikeHouseType = res.body.configs.data
				for (let i in pikeHouseType) {
					if (pikeHouseType[i].id) {
						//把数组的 houseId字段改名为id
						pikeHouseType[i].id = pikeHouseType[i].id;
						//把字段的 房屋名称【houseNo】 改名为text
						pikeHouseType[i].text = pikeHouseType[i].version;
						//把数组的 houseNo字段改名为value
						pikeHouseType[i].value = pikeHouseType[i].id;
					}
				}
				pikeHouseType.unshift({
					id: '',
					text: '费用类型',
					value: ''
				})
				//把处理后的分类数组 赋值
				this.houseTyoe = pikeHouseType;
			},
			// data-picker事件
			onchange(e) {
				const value = e.detail.value
				console.log("Oonchange(e)" + e.detail.value[0].text)
			},
			onnodeclick(node) {},
			Sonchange(e) {
				const value = e.detail.value
				this.SelStatus = e.detail.value[0].value
			},
			Sonnodeclick(node) {},
			ronchange(e) {
				const value = e.detail.value
				console.log("ronchange(e)" + e.detail.value[0].text)
				this.SelUniquNo = e.detail.value[0].value
				this.doSearch(e)
			},
			ronnodeclick(node) {},
			tonchange(e) {
				const value = e.detail.value
				console.log("tonchange(e)" + e.detail.value[0].text)
				// this.version=e.detail.value[0].text
				// this.getRoomsVersion(this.version)
				this.SelVarsion = e.detail.value[0].text
			},
			tonnodeclick(node) {},

			/*下拉刷新的回调, 有3种处理方式:*/
			downCallback() {
				// 绝大部分情况methods中都不用写downCallback的,此时会默认调MescrollMixin的downCallback (效果同第2种)
				this.mescroll.endSuccess()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				const res = await this.$myRequest({
					url: '/api-operate/settlement/?uniqueNo=' + this.SelUniquNo +
						"&version=" + this
						.SelVarsion + '&meterReadingMonth=' + this.SelRtime + '&deadlineDown=' + this
						.SelDeadlineD + '&deadlineUp=' + this.SelDeadlineU + '&status=' + this.SelStatus +
						'&pageNumber=' + pageNum + '&pageSize=' + pageSize,
					method: "get",
				})
				console.log(res)
				console.log(page)
				if (res.success == true) {
					// 接口返回的当前页数据列表 (数组)
					if (res.body.settlement.data == null) {
						this.mescroll.endBySize(0, 0);
					} else {
						let curPageData = res.body.settlement.data;
						let curPageLen = curPageData.length;
						let totalPage = res.body.settlement.totalPage;
						let totalSize = res.body.settlement.totalSize;
						let hasNext = false;
						this.mescroll.endSuccess()

						this.meters = this.meters.concat(curPageData);

						// 分割字符串
						for (let i in this.meters) {
							if (this.meters[i].deadline) {
								let Trdate = new Date(this.meters[i].deadline);
								let TrdateEd = Trdate.getFullYear() + '-' + (Trdate.getMonth() + 1) + '-' +
									Trdate.getDate();
								this.meters[i].deadline = TrdateEd
							}
						}
						for (let i in this.meters) {
							if (this.meters[i].meterReadingTime) {
								let Trdate = new Date(this.meters[i].meterReadingTime);
								let TrdateEd = Trdate.getFullYear() + '-' + (Trdate.getMonth() + 1) + '-' +
									Trdate.getDate();
								this.meters[i].meterReadingTime = TrdateEd
							}
						}



						for (let i in this.meters) {
							// 添加楼宇No字段
							if (this.meters[i]) {
								this.meters[i].buidingNo = this.meters[i].uniqueNo.split("-")[0]
								this.meters[i].uniqueNumber = this.meters[i].uniqueNo.split("-")[1]
							}
							// 修改楼宇显示
							if (this.meters[i].buidingNo == this.Buiding[0].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[0].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[1].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[1].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[2].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[2].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[3].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[3].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[4].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[4].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[5].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[5].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[6].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[6].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[7].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[7].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[8].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[8].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[9].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[9].buildingName
							} else if (this.meters[i].buidingNo == this.Buiding[10].buildingNo) {
								this.meters[i].buidingNo = this.Buiding[10].buildingName
							}
						}
						console.log(this.meters)
						this.mescroll.endBySize(curPageLen, totalSize);
					}

				}
			},
			// ***********************
			floor_onchange(e) {
				const value = e.detail.value
				this.floorId = e.detail.value[0].floorId
				this.house(this.buildingId, this.floorId)
			},
			onchange(e) {
				const value = e.detail.value

				this.buildingId = e.detail.value[0].buildingId
				this.BudingNo = e.detail.value[0].buildingNo

				this.getFloor(this.buildingId)
			},
			onnodeclick(node) {},
			toAddReading(e) {
				this.Roomvalue = this.uniqueNo
				this.iisShow = false
				this.SelUniquNo = this.Roomvalue
				this.doSearch(e)
			},
			toAddReadingReset() {
				uni.redirectTo({
					url: '/pages/meterCheck/index'
				});
			},
			showRoomBtn() {
				this.iisShow = !this.iisShow
			},
			clickLightBox() {
				this.iisShow = false
			},
			async getBuilding() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/house/building/',
						method: "get",
					})
				this.Building = res.body.houseBuilding.data
				let inBuilding = res.body.houseBuilding.data

				for (let i in inBuilding) {
					if (inBuilding[i].buildingId) {
						inBuilding[i].id = inBuilding[i].buildingId;
						inBuilding[i].text =
							"*" + inBuilding[i].buildingName + "*    " + inBuilding[i].buildingNo + "栋";
						inBuilding[i].value = inBuilding[i].buildingNo;
					}
				}
				this.Building = inBuilding;
				this.showF = false
			},
			async getFloor(buildingId) {
				const res = await this
					.$myRequest({
						url: '/api-sale/config/house/floor/?buildingId=' + this.buildingId,
						method: 'get'
					})
				console.log(res)
				this.Floor = res.body.houseFloor.data
				let inFloor = res.body.houseFloor.data

				//第一步 【改数组】 处理分类数据
				for (let i in inFloor) {
					if (inFloor[i].floorId) {
						inFloor[i].id = inFloor[i].floorId;
						inFloor[i].value = inFloor[i].floorId;
						inFloor[i].text = inFloor[i].floorName;
					}
				}
				//把处理后的分类数组 赋值
				this.Floor = inFloor;
				console.log(this.Floor)
				this.showF = false
			},

			// 获取房间号
			async house(buildingId, floorId) {

				const res = await this

					.$myRequest({
						url: '/api-house/api/house/?buildingId=' + this.buildingId +
							"&floorId=" + this.floorId + "&saleStatus=4",
						method: 'get'
					})
				this.Room = res.data.data
				let inrooms = res.data.data
				let flag = '1'
				if (res.data.totalPage != 1) {
					this.clickValue = '' //清空
					this.uniqueNo = ''
					this.isBtnShow = false
				} else {}
				for (let i in inrooms) {
					if (inrooms[i].houseId) {
						inrooms[i].id = inrooms[i].houseId;
						inrooms[i].Num = inrooms[i].houseNo;
						inrooms[i].text = inrooms[i].houseNo;
						inrooms[i].value = inrooms[i].houseName;
					}
				}
				//把处理后的分类数组 赋值
				this.Room = inrooms;
				this.showF = true
			},
			change(e) {
				this.uniqueNo = this.BudingNo + "-" + e.detail.data.Num
				this.clickValue = e.detail.data.Num
				if (this.clickValue == '') {
					this.isBtnShow = false
				} else {
					this.isBtnShow = true
				}
			},
		},
	}
</script>

<style lang="less">
	.content .loadingText {
		line-height: 30px;
		text-align: center;
		font-size: 12px;
		color: #999;
	}

	.meter-index-nav-box {
		height: 100rpx;
	}

	.meter-index-nav {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		z-index: 10;
	}

	.meter-index-nav view {
		display: flex;
	}

	#meter-index-nav {
		/* color: #007AFF; */
	}

	.mater-rooms-checkbox {
		display: flex;
		align-items: center;
		width: 17%;
		height: 100rpx;

		color: #808080;
		margin-left: 10rpx;
	}

	.mater-houseType-checkbox {
		overflow: hidden;
		position: relative;
		width: 21%;
		height: 100rpx;
	}

	.mater-time-checkbox {
		width: 19.4%;
		/* height: 50px; */
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #808080;
	}

	.mater-dtime-checkbox {
		width: 27%;
		/* height: 50px; */
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #808080;
	}

	.mater-status-checkbox {
		width: 13%;
	}

	.menu-bg {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.moveBtnBox {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100%;
		pointer-events: none;
		z-index: 999;
	}

	.moveBtn {
		color: #F00;
		position: relative;
		pointer-events: auto;
		width: auto;
		height: auto;
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #109EF8;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.SelectReadingBar {
		background-color: #FFFFFF;
		height: 68rpx;

		padding: 0 24rpx 0 24rpx;

		font-size: 24rpx;

		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.SelectReadingBar view {
		display: flex;
		align-items: center;
	}

	.imgbox {
		width: 24rpx;
		height: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		overflow: hidden;
	}

	.bgImg1 {
		background: url(/static/image/weijiaofei@2x.png)no-repeat;
		background-size: 100% 100%;
		width: 120rpx;
		height: 92rpx;
		margin: 0 -20rpx 0 20rpx;
		position: absolute;
	}

	.bgImg2 {
		background: url(/static/image/yijiaofei-beifen.png)no-repeat;
		background-size: 100% 100%;
		width: 120rpx;
		height: 92rpx;
		margin: 0 -20rpx 0 20rpx;
		position: absolute;
	}

	.SearchBox {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.SearchContainer {
		width: 624rpx;
		height: 64rpx;

		background-color: #F9FAFC;
		border: #FFFFFF 2rpx solid;
		border-radius: 10RPX;

		display: flex;
		align-items: center;

		padding: 0 0 0 28rpx;
		margin: 28rpx 0 0 0;
	}

	.SearchContainer input {
		width: 50%;
		font-size: 24rpx;
		color: #D0D0D0;
	}

	.ReadingContainer {
		font-size: 24rpx;
	}

	/* 选中的时间 */
	.ReadingContainer .RedingTime {
		color: #C7C7C7;
		font-weight: bold;

		margin: 30rpx 0 20rpx 20rpx;
	}

	#preloader_1 {
		height: 40px;
		line-height: 40px;
		position: relative;
		text-align: center;
	}

	#preloader_1 span {
		width: 5px;
		height: 5px;
		margin: 0 1px;
		display: inline-block;
		vertical-align: middle;
		background: #9b59b6;
		animation: preloader_1 1.5s infinite ease-in-out;
	}

	#preloader_1 span:nth-child(2) {
		animation-delay: .2s;
	}

	#preloader_1 span:nth-child(3) {
		animation-delay: .4s;
	}

	#preloader_1 span:nth-child(4) {
		animation-delay: .6s;
	}

	#preloader_1 span:nth-child(5) {
		animation-delay: .8s;
	}

	@keyframes preloader_1 {
		0% {
			height: 5px;
			background: #9b59b6;
		}

		25% {
			height: 30px;
			background: #3498db;
		}

		50% {
			height: 5px;
			background: #9b59b6;
		}

		100% {
			height: 5px;
			background: #9b59b6;
		}
	}

	.screen-btn {
		border-left: #F0F0F0 6rpx solid;
		padding: 0 20rpx 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			margin: 0 0 0 20rpx;
		}
	}

	.my-d-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.selectBox {
		background: #40B1F9 !important;
		color: #fff !important;
	}

	.checkbox {
		display: inline-block;
		border-radius: 40rpx;
		text-align: center;
		width: 210rpx;
		height: 62rpx;
		border: 2rpx solid #40B1F9;
		margin: 5rpx;
		color: #000;
		font-size: 26rpx;
		line-height: 62rpx;

	}

	.checkbox-title {
		position: absolute !important;
		top: 20rpx;
		left: 20rpx;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 60rpx;
		font-weight: bold;
		color: #666666;
	}

	.mater-status-size {
		width: 450rpx;
		padding-top: 60rpx;
		// border: 1px solid #7FFFD4;
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}

	.drawer-box-btn {
		position: absolute;
		bottom: 50rpx;
		display: flex;
		width: 428rpx;

		.d-b-reset {
			width: 152rpx;
			height: 54rpx;
			border-radius: 0;
			border: #109EF8 2rpx solid;
			margin-right: 0;
			color: #109EF8;
			font-size: 24rpx;
		}

		.d-b-submit {
			width: 270rpx;
			height: 54rpx;
			border-radius: 0;
			border: #109EF8 2rpx solid;
			background-color: #109EF8;
			margin-left: 0;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	// ************
	.light-box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 999;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ps {
		width: 60%;
		height: 300rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 50rpx;
	}

	.ps .btn {
		position: absolute;
		bottom: 0;
		font-size: 36rpx;
		background-color: #EBEFF6;
		width: 100%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.AddCostContainer {
		display: flex;
		justify-content: center;
	}

	.light-box2 {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 10;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.SelectRoomsBox {
		width: 100%;
		height: 990rpx;
		padding-top: 60rpx;
		background-color: #EBEFF6;
		border-radius: 20rpx 20rpx 0 0;
		position: fixed;
		z-index: 10;
		bottom: 0;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.SelectBox {
		width: 95%;
		display: flex;
		justify-content: space-between;
		margin: 64rpx 0 40rpx 0;
	}

	.Building,
	.floor {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 300rpx;
	}

	.floors {
		padding: 0;
		margin-top: 60rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.floors:nth-child {
		width: 190rpx;
		/* background-color: #109EF8; */
		background-color: #FFFFFF;

		font-size: 32rpx;


		border: none;

		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button:active {
		background-color: #109EF8;
		color: #FFFFFF;
	}

	.resetBtn {
		// background-color: #E36B7A;
		// margin-bottom: -100rpx;
		position: absolute;
		left: 0;
		top: 20rpx;
		font-size: 26rpx;
		background-color: #EBEFF6;
	}

	.resetBtn::after {
		border: none;
	}
</style>
